<template>
	<div class="Power"
		v-loading="loading"
		element-loading-text="拼命加载中"
	    element-loading-spinner="el-icon-loading"
	    element-loading-background="rgba(0, 0, 0, 0.8)">
		<!--左边菜单-->
		<div class="fromStructure-left">
			<!--列表栏-->
			<div class="list-left" 
				v-for="(it,i) in list" 
				@click.stop="listClick(it,i)">
				<div class="left-in" :class="listI === i?'active':''">
					<div class="iconfont wjicon iconshezhi"></div>
					<div class="listname">{{it.roleName}}</div>
				</div>
				<div class="sonlist" 
					v-if="listX === i" 
					v-for="(item,index) in it.deptDOS" 
					@click.stop="sonListClick(it,item,index)"
					:class="sonlistI === index?'active':''">
					<div class="iconfont wjicon iconfl-renshi"></div>
					<div class="listname">{{item.name}}</div>
				</div>
			</div>
		</div>
		<!--内容-->
		<div class="fromStructure-content">
			<!--header-->
			<div class="header-option">
				<div class="option-left">成员列表</div>
				<div class="option-right">
					<el-button type="primary" size="small" @click="newaddUser(true)">新增成员</el-button>
				</div>
			</div>
			<!--删除成员-->
			<div class="del-option">
				<div class="option-left">
					<div class="left-cell" v-for="(item,index) in deldata">
						<div class="cell-img">
							<img :src="item.headImg" />
						</div>
						<div class="name">{{item.name}}</div>
					</div>
				</div>
				<div class="option-right"  @click="delUser(true)">
					<i class="iconfont deicon iconyingyong-"></i>
					<div class="option-text">删除成员</div>
				</div>
			</div>
			<!--管理范围-->
			<div class="role-content">
				<div class="role-left">管理范围</div>
				<div class="role-right"></div>
			</div>
			<!--权限信息-->
			<div class="role-msg">
				<div class="role-left">权限信息</div>
				<div class="role-right" :v-html="hdata"></div>
			</div>
		</div>
		<!--增加子部门-->
		<SelectUserModel :modeshow="modeshow" />
	</div>
</template>

<script>
import SelectUserModel from '@/components/SelectUserModel/selectmodel'
import Bus from '@/common/config/bus'
import {
	allrolelist,
	findidrole,
	addrole,
	delrole} from '@/service/powerstruct'
export default {
	components:{
		SelectUserModel
	},
    data () {
        return {
        	loading:false,
        	list:[],
        	//权限用户数据
        	userlist:[],
	    	optionflag:false,//数据操作状态
	    	tableData: [],
	        //部门人数名字，
	        bmname:'',
	        bmnumber:0,
	        modeshow:false,
	        listI:0,
	        sonlistI:-1,
	        loading:false,
	        listX:-1,
	        //删除数据模拟
	        deldata:[],
	        //默认头像
        	headericon:'../../../static/header/menu/position.png',
	        hdata:"会根据进步空间比较",
	        selectmenu:{},
	        //model选择数据
	        selectmodeldata:[],
	        //新增0。删除标志1
	        adtype:0,
   		}
    },
    created(){
    	const that = this
		this.loadallrolelist()
		let headerdata = {
			type:1,
			name:'权限',
		}
		Bus.$emit('headerline',headerdata)
		Bus.$on('close',function(data){
			if(that.adtype === 0){
				that.newaddUser(data.show)
			}else{
				that.delUser(data.show)
			}
		})
		Bus.$on('closesure',function(data){
			that.selectmodeldata = data.datainfo
			if(that.adtype === 0){
				that.newaddUser(data.show)
				that.$confirm('你选择了新增'+that.selectmodeldata.length+'人', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		       		that.loadaddrole()
		        }).catch(() => {
		          that.$message({
		            type: 'info',
		            message: '已取消'
		          });          
		        });
			}else{
				that.delUser(data.show)
				that.$confirm('你选择了删除'+that.selectmodeldata.length+'人', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		       		that.loaddelrole()
		        }).catch(() => {
		          that.$message({
		            type: 'info',
		            message: '已取消'
		          });          
		        });
			}
			
		})
    },
    methods:{
    	delUser(flag){
    		console.log(flag)
    		this.modeshow = flag
    		this.adtype = 1
    	},
    	//删除成员加载
    	loaddelrole(){
    		const that = this
    		var userIdList = []
			for (var i = 0; i < this.selectmodeldata.length; i++) {
				userIdList.push(this.selectmodeldata[i].userId)
			}
    		let data = {
       			roleId:that.selectmenu.roleId,
       			userIdList:userIdList
       		}
        	that.loading = true
			delrole(data).then(res =>{
				that.loading = false
				if(res.data.code === 0){
					that.loadfindidrole(that.selectmenu.roleId)
					that.$notify({
			          title: '成功提示',
			          message: '删除成功',
			          type: 'success'
			        });
				}else{
					that.loading = false
					that.$notify({
			          title: '警告',
			          message: '服务器出错了',
			          type: 'warning'
			        });
				}
			})
			.catch(res => {
	      		that.$message.error(res);
	    	});
    	},
    	//新增成员加载
    	loadaddrole(){
    		const that = this
    		var userIdList = []
			for (var i = 0; i < this.selectmodeldata.length; i++) {
				userIdList.push(this.selectmodeldata[i].userId)
			}
    		let data = {
       			roleId:that.selectmenu.roleId,
       			userIdList:userIdList
       		}
        	that.loading = true
			addrole(data).then(res =>{
				that.loading = false
				if(res.data.code === 0){
					that.loadfindidrole(that.selectmenu.roleId)
					that.$notify({
			          title: '成功提示',
			          message: '新增成功',
			          type: 'success'
			        });
				}else{
					that.loading = false
					that.$notify({
			          title: '警告',
			          message: '服务器出错了',
			          type: 'warning'
			        });
				}
			})
			.catch(res => {
	      		that.$message.error(res);
	    	});
    	},
    	//新增成员
    	newaddUser(flag){
    		this.modeshow = flag
    		this.adtype = 0
    	},
    	//根据id查询权限管理用户
    	loadfindidrole(id){
    		const that = this
  			this.loading = true
  			let data = {
  				roleId:id
  			}
  			findidrole(data).then(res =>{
  				if(res.data.code === 0){
  					this.loading = false
					that.deldata = res.data.data
					for(let i=0;i<that.deldata.length;i++){
						if(that.deldata[i].headImg === ''||that.deldata[i].headImg === null){
							that.deldata[i].headImg = that.headericon
						}
					}
  				}
  			})
  			.catch(res => {
            	that.$message.error(res);
          	});
    	},
    	//加载权限用户数据
    	loadallrolelist(){
  			const that = this
  			this.loading = true
  			allrolelist().then(res =>{
  				if(res.data.code === 0){
  					this.loading = false
  					that.list = res.data.data
  					that.selectmenu = that.list[0]
  					that.loadfindidrole(that.list[0].roleId)
  				}else{
  					that.loading = false
  				}
  			})
  			.catch(res => {
            	that.$message.error(res);
          	});
  		},
  		//根据
  		listClick(it,i){
  			this.selectmenu = it
	     	this.listI = i
	     	this.sonlistI = -1
	     	if(this.listX === i){
	     		this.listX = -1
	     		this.sonlistI = 0
	     	}else{
	     		this.listX = i
	     		this.sonlistI = 0
	     	}
	     	this.loadfindidrole(it.roleId)
     	},
     	sonListClick(it,item,index){
	     	this.sonlistI = index
     	},
    }
}
</script>

<style scoped lang="scss">
$from_bg_color:#F9FAFC;
$from_active:#409EFF;
$left_font_color:#C7C4C4;
	.Power{
		width: 100%;
		height: 100%;
		display: inline-flex;
		.fromStructure-left{
				width: 300px;
				height: 100%;
				display: flex;
				flex-flow: column;
				overflow: auto;
				padding-top: 30px;
				background-color: $from_bg_color;
				border:1px solid #EFF5FD;
				/*列表*/
				.list-left{
					margin-left: 9px;
					width: 96%;
					margin-top: 1px;
					.left-in{
						cursor: pointer;
						padding: 5px 0;
						background-color: white;
						width: 100%;
						display: inline-flex;
						align-items: center;
						.wjicon{
							width: 14%;
							margin-left: 10px;
							font-size: 18px;
							font-weight: bold;
						}
						.listname{
							width: 70%;
							font-family: "微软雅黑";
							font-size: 14px;
							text-align: left;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
					.sonlist{
						cursor: pointer;
						margin-left: 10%;
						width: 90%;
						padding: 5px 0;
						border-top: 1px solid $from_bg_color;
						background-color: white;
						display: inline-flex;
						align-items: center;
						.wjicon{
							width: 15%;
							font-size: 26px;
						}
						.listname{
							width: 60%;
							font-family: "微软雅黑";
							font-size: 16px;
							text-align: left;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
					.active{
						background-color: $from_active;
						color: white;
					}
				}
		}
		/*内容*/
		.fromStructure-content{
			width: 100%;
			overflow: auto;
			border-top: 1px solid rgba(0,0,0,0.1);
			border-bottom: 1px solid rgba(0,0,0,0.1);
			border-right: 1px solid rgba(0,0,0,0.1);
			border-top-right-radius: 10px;
			padding: 15px;
			border-bottom-right-radius: 10px;
			height: 100%;
			.header-option{
				width: 100%;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				.option-left{
					flex: 1;
					font-family: "微软雅黑";
					font-size: 16px;
					color: $left_font_color;
					text-align: left;
				}
				.option-right{
					flex: 1;
					text-align: right;
				}
			}
			/*删除操作*/
			.del-option{
				width: 100%;
				margin-top: 15px;
				display: inline-flex;
				background-color: #F6F6F6;
				align-items: center;
				.option-left{
					width: 95%;
					padding: 10px;
					background-color: white;
					border-top: 1px solid $left_font_color;
					border-bottom: 1px solid $left_font_color;
					display: inline-flex;
					flex-flow: wrap;
					align-items: center;
					.left-cell{
						margin-left: 5px;
						min-width: 60px;
						max-width: 60px;
						.cell-img{
							border-radius: 100%;
							overflow: hidden;
							img{
								border-radius: 100%;
							}
						}
						.name{
							font-family: "微软雅黑";
							font-size: 14px;
							color: black;
						}
					}
				}
				.option-right{
					width: 5%;
					color: #E51C23;
					min-width: 100px;
					.deicon{
						font-family: "微软雅黑";
						font-size: 30px;
						font-weight: bold;
					}
					.option-text{
						font-family: "微软雅黑";
						font-size: 14px;
						font-weight: bold;
					}
				}
			}
			/*管理范围*/
			.role-content{
				width: 100%;
				padding: 15px;
				border-bottom: 1px solid $left_font_color;
				display: inline-flex;
				align-items: center;
				.role-left{
					flex: 1;
					max-width: 150px;
					font-family: "微软雅黑";
					font-size: 16px;
					color: $left_font_color;
					text-align: left;
				}
				.role-right{
					flex: 1;
					font-family: "微软雅黑";
					font-size: 14px;
					color: $left_font_color;
					text-align: left;
				}
			}
			/*权限信息*/
			.role-msg{
				width: 100%;
				padding: 20px;
				display: inline-flex;
				align-items: center;
				.role-left{
					flex: 1;
					max-width: 150px;
					font-family: "微软雅黑";
					font-size: 16px;
					color: $left_font_color;
					text-align: left;
				}
				.role-right{
					flex: 1;
					font-family: "微软雅黑";
					font-size: 14px;
					color: $left_font_color;
					text-align: left;
				}
			}
		}
}
</style>